<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ECharts 示例</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script> -->
    <script src="./echarts.min.js"></script>
    <script src="./xlsx.full.min.js"></script>
    <style>
      /* 确保图表容器有高度 */
      #chartContainer {
        width: 1800px;
        height: 800px;
      }
    </style>
  </head>
  <body>
    <button onclick="reChenXiang()">热成像分析</button>
    <input type="file" id="fileInput" />

    <!-- 图表容器 -->
    <div id="chartContainer"></div>

    <script>
      document
        .getElementById("fileInput")
        .addEventListener("change", handleFile, false);

      //   页面跳转
      function reChenXiang() {
        window.location.replace("./jux.html");
      }
      function handleFile(event) {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (e) {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });

          // 读取第一个工作表
          const sheetName = workbook.SheetNames[0];
          const sheet = workbook.Sheets[sheetName];

          // 将工作表转换为 JSON 对象
          const json = XLSX.utils.sheet_to_json(sheet);

          // 显示数据
          //   document.getElementById("output").textContent = JSON.stringify(
          //     json,
          //     null,
          //     2
          //   );

          // 你可以将数据传递给 ECharts 或其他数据处理函数
          //   时间戳转换;
          console.log("---firstItems----->>>>", json);

          const firstItems = json.map((item) =>
            formatTimestampWithMicroseconds(item["0"])
          );
          const dataone = json.map((item) => item["1"]);
          const datatwo = json.map((item) => item["2"]);
          creaDom(firstItems, [dataone, datatwo]);
        };
        reader.readAsArrayBuffer(file);
      }

      //   function zData(time) {
      //     const timestamp = time;
      //     const date = new Date(timestamp * 1000); // 时间戳单位为秒，乘以 1000 转换为毫秒

      //     // 格式化日期和时间
      //     const year = date.getFullYear();
      //     const month = String(date.getMonth() + 1).padStart(2, "0");
      //     const day = String(date.getDate()).padStart(2, "0");
      //     const hours = String(date.getHours()).padStart(2, "0");
      //     const minutes = String(date.getMinutes()).padStart(2, "0");
      //     const seconds = String(date.getSeconds()).padStart(2, "0");

      //     const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      //     return formattedDate;
      //     // console.log(formattedDate); // 输出: 2024-09-11 11:22:26
      //   }
      function formatTimestampWithMicroseconds(timestamp) {
        // 提取秒和微秒部分
        const seconds = Math.floor(timestamp);
        const microseconds = Math.round((timestamp - seconds) * 1000);

        const date = new Date(seconds * 1000);

        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const secondsFormatted = String(date.getSeconds()).padStart(2, "0");

        return `${year}-${month}-${day} ${hours}:${minutes}:${secondsFormatted}.${String(
          microseconds
        ).padStart(3, "0")}`;
      }

      // 初始化 ECharts 实例
      //   var chart = echarts.init(document.getElementById("chartContainer"));
      function creaDom(echData, jdata) {
        console.log("====", jdata);
        var chartDom = document.getElementById("chartContainer");
        var myChart = echarts.init(chartDom);
        var option;

        var charts = {
          unit: "A",
          names:
            jdata[1][0] == undefined ? ["储能数据"] : ["储能数据", "储能数据2"],
          lineX: echData,
          value: jdata,
          //   value: [
          //     [
          //       451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453,
          //       524, 165, 236, 527, 328, 129, 530,
          //     ],
          //     //   ,
          //     //   [
          //     //     360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345,
          //     //     65, 325, 468, 108, 253, 98,
          //     //   ],
          //   ],
        };
        // 折线的颜色
        var color = ["rgba(23, 255, 243", "rgba(255,100,97"];
        var lineY = [];

        for (var i = 0; i < charts.names.length; i++) {
          var x = i;
          if (x > color.length - 1) {
            x = color.length - 1;
          }
          var data = {
            name: charts.names[i],
            type: "line",
            color: color[x] + ")",
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[x] + ", 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: color[x] + ", 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            symbol: "circle",
            symbolSize: 5,
            data: charts.value[i],
          };
          lineY.push(data);
        }

        lineY[0].markLine = {
          silent: true,
          data: [
            {
              yAxis: -1,
            },
            {
              yAxis: 2,
            },
            {
              yAxis: 3,
            },
            {
              yAxis: 4,
            },
            {
              yAxis: 5,
            },
          ],
        };
        var option = {
          backgroundColor: "rgba(0,0,0,1)", //背景色
          tooltip: {
            trigger: "axis",
          },
          dataZoom: [
            {
              type: "slider", // 滑块型缩放
              start: 0, // 起始百分比
              end: 100, // 结束百分比
            },
            {
              type: "inside", // 内置型缩放
              start: 0,
              end: 100,
            },
          ],
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                // 缩放工具
                show: true,
              },
              restore: {
                // 恢复默认视图
                show: true,
              },
            },
          },
          legend: {
            data: charts.names,
            textStyle: {
              fontSize: 12,
              color: "rgb(0,253,255,0.6)", //legend 的颜色
            },
            right: "4%",
          },
          grid: {
            top: "14%",
            left: "4%",
            right: "4%",
            bottom: "12%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: charts.lineX,
            axisLabel: {
              // x轴的数字颜色
              textStyle: {
                color: "rgb(0,253,255,0.6)",
              },
              formatter: function (params) {
                return params.split(" ")[0] + "\n" + params.split(" ")[1];
              },
            },
          },
          yAxis: {
            name: charts.unit,
            type: "value",
            axisLabel: {
              formatter: "{value}",
              //   数字颜色
              textStyle: {
                color: "rgb(0,253,255,0.6)",
              },
            },
            // 标线的颜色
            splitLine: {
              lineStyle: {
                color: "rgb(23,255,243,0.3)",
              },
            },
            // 单位的颜色
            axisLine: {
              lineStyle: {
                color: "rgb(0,253,255,0.6)",
              },
            },
          },
          series: lineY,
        };
        setInterval(() => {
          myChart.setOption({
            legend: {
              selected: {
                储能数据: false,
              },
            },
          });
          myChart.setOption({
            legend: {
              selected: {
                储能数据: true,
              },
            },
          });
        }, 10000);

        option && myChart.setOption(option);
      }
    </script>
  </body>
</html>
